<template>
  <view class="container">
    <!-- 消息分类 -->
    <view class="message-tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'all' }"
        @click="switchTab('all')"
      >
        全部
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'system' }"
        @click="switchTab('system')"
      >
        系统消息
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'order' }"
        @click="switchTab('order')"
      >
        订单消息
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'activity' }"
        @click="switchTab('activity')"
      >
        活动消息
      </view>
    </view>
    
    <!-- 消息列表 -->
    <scroll-view class="message-list" scroll-y>
      <view 
        class="message-item" 
        v-for="message in messageList" 
        :key="message.id"
        :class="{ unread: !message.isRead }"
        @click="readMessage(message.id)"
      >
        <view class="message-icon">
          <image 
            class="icon-img" 
            :src="getMessageIcon(message.type)"
          ></image>
        </view>
        <view class="message-content">
          <view class="message-header">
            <text class="message-title">{{ message.title }}</text>
            <text class="message-time">{{ message.time }}</text>
          </view>
          <text class="message-text">{{ message.content }}</text>
        </view>
        <view v-if="!message.isRead" class="unread-dot"></view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="messageList.length === 0" class="empty-state">
        <image class="empty-icon" src="/static/icons/message-empty.png"></image>
        <text class="empty-text">暂无消息</text>
      </view>
    </scroll-view>
    
    <!-- 底部操作 -->
    <view class="bottom-actions">
      <button class="action-btn" @click="markAllRead">全部已读</button>
      <button class="action-btn" @click="clearAll">清空消息</button>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      activeTab: 'all',
      messageList: []
    }
  },
  onLoad() {
    this.getMessageList()
  },
  methods: {
    // 获取消息列表
    async getMessageList() {
      try {
        const res = await api.message.getMessageList()
        if (res.code === 200) {
          this.messageList = res.data
        }
      } catch (error) {
        console.error('获取消息列表失败:', error)
      }
    },
    
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
      uni.showToast({
        title: `切换到${tab === 'all' ? '全部' : tab === 'system' ? '系统' : tab === 'order' ? '订单' : '活动'}消息`,
        icon: 'none'
      })
    },
    
    // 获取消息图标
    getMessageIcon(type) {
      const iconMap = {
        system: '/static/icons/message-system.png',
        order: '/static/icons/message-order.png',
        activity: '/static/icons/message-activity.png'
      }
      return iconMap[type] || '/static/icons/message-default.png'
    },
    
    // 阅读消息
    readMessage(id) {
      // 更新消息为已读状态
      const message = this.messageList.find(msg => msg.id === id)
      if (message && !message.isRead) {
        message.isRead = true
        uni.showToast({
          title: '标记为已读',
          icon: 'none'
        })
      }
    },
    
    // 全部已读
    markAllRead() {
      this.messageList.forEach(msg => {
        msg.isRead = true
      })
      uni.showToast({
        title: '全部标记为已读',
        icon: 'success'
      })
    },
    
    // 清空消息
    clearAll() {
      uni.showModal({
        title: '提示',
        content: '确定要清空所有消息吗？',
        success: (res) => {
          if (res.confirm) {
            this.messageList = []
            uni.showToast({
              title: '消息已清空',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.message-tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  color: #007aff;
  border-bottom: 4rpx solid #007aff;
}

.message-list {
  flex: 1;
  padding: 0 20rpx;
}

.message-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.message-item.unread {
  background-color: #f0f8ff;
}

.message-icon {
  margin-right: 20rpx;
}

.icon-img {
  width: 80rpx;
  height: 80rpx;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.message-title {
  font-size: 30rpx;
  font-weight: bold;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.unread-dot {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #ff3b30;
  border-radius: 50%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}

.empty-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.bottom-actions {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #f5f5f5;
}

.action-btn {
  flex: 1;
  margin: 0 10rpx;
  background-color: #f5f5f5;
  border: none;
  font-size: 28rpx;
  color: #666;
  padding: 15rpx;
  border-radius: 10rpx;
}
</style>